<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滚动条</title>
		<style type="text/css">
			#box{ position: relative;
			      width:1200px;
			      margin: 0 auto;}
			#dj{ position: fixed;
			     bottom: 0;
			     right: 5px;
			     width: 50px;
			     height: 40px;
			     background: #FF6600;
			     border: #000000 solid 1px;
			     display: none;}
		.on{ display: block;}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="../img/tb_bg.jpg" id="qq"/>
			<div id='dj'>点击</div>
		</div>
	</body>
</html>
<script src="../jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var wheight=document.documentElement.clientHeight;
	var timer=null;
	var db=null;
	var istop=true;
	window.onscroll=function(){
		db=document.body.scrollTop?document.body:document.documentElement;
		if(db.scrollTop>=wheight){
			$('#dj').css('display','block');
		}else{
			$('#dj').css('display','none')
		}
		if(!istop){
			clearInterval(timer);
		}
		istop=false;
	}
	$('#dj').click(function(){
		timer=setInterval(function(){
			var speed=Math.floor(0-db.scrollTop)/8;
			istop=true;
			if(db.scrollTop==0){
				clearInterval(timer);
			}else{
				db.scrollTop += speed;
			}
		},60)
	})
</script>